package com.pijiu.compose.demo00

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.expandHorizontally
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.animation.shrinkHorizontally
import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Face
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

/**
 * Jetpack Compose(6)——动画 高级API
 *
 * https://www.cnblogs.com/joy99/p/18160974
 */
class Demo05Activity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column {
                AnimatedVisibilityDemo()
            }
        }
    }
}

//AnimatedVisibility 是一个用于可组合项出现/消失的过渡动画效果。
// 借助 AnimatedVisibility 可以轻松实现隐藏和显示可组合项。
//
//可以看到，AnimatedVisibility 是基于 Transition 动画实现的。关键参数如下：
//visible： 表示可组合项出现或者消失。
//content： 表示要添加出现/消失动画的可组合项内容。
//enter： 表示 content 出现的动画。EnterTransition 类型。
//exit： 表示 content 消失的动画。ExitTransition 类型。
//
//对于动画，可以使用 + 运算符，组合多个 EnterTransition 或者 ExitTransition 对象。默认情况下内容以淡入和扩大的方式出现，以淡出和缩小的方式消失。
//Compose 提供了多种 EnterTransition 或者 ExitTransition 的实例。
//fadeIn、fadeOut、slideIn、slideOut、slideInHorizontally、slideOutHorizontally、
// slideInVertically、slideOutVertically、scaleIn、scaleOut、expandIn、shrinkOut、
// expandHorizontally、shrinkHorizontally、expandVertically、shrinkVertically。
@OptIn(ExperimentalAnimationApi::class)
@Preview
@Composable
fun AnimatedVisibilityDemo() {
//    var visible by remember {
//        mutableStateOf(false)
//    }
    val visible = remember {
        MutableTransitionState<Boolean>(false)
    }
    Column {
        AnimatedVisibility(
//            visible = visible,
            visibleState = visible,
            modifier = Modifier,
            enter = fadeIn() + expandVertically() + scaleIn(),
            exit = fadeOut() + shrinkVertically() + scaleOut(),
        ) {
            Box(
                modifier = Modifier
                    .background(Color.LightGray)
                    .size(200.dp)
                    .animateEnterExit(
                        enter = slideInHorizontally(),
                        exit = slideOutHorizontally(),
                        label = ""
                    )
            )
        }
        Button(onClick = {
//            visible = !visible
            visible.targetState = !visible.currentState
        }) {
            Text(text = "click me")
        }
        Text(
            text = when {
                visible.isIdle && visible.currentState -> "Visible"
                !visible.isIdle && visible.currentState -> "Disappearing"
                visible.isIdle && !visible.currentState -> "Invisible"
                else -> "Appearing"
            },
            color = Color.White
        )
    }
}

//AnimatedContent 可组合项会在内容根据目标状态发生变化时，为内容添加动画效果。
@Preview
@Composable
fun AnimatedContentDemo() {
    var typeState by remember {
        mutableStateOf(true)
    }
    Column {
        Button(onClick = {
            typeState = !typeState
        }) {
            Text(text = "Change Type")
        }
        AnimatedContent(targetState = typeState, label = "") {
            if (it) {
                Text(
                    text = "Hello, Animation",
                    modifier = Modifier
                        .background(Color.Yellow)
                        .wrapContentSize()
                )
            } else {
                Icon(imageVector = Icons.Filled.Face, contentDescription = "")
            }
        }
    }
}
